<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="Vue.js"></script>
		<style type="text/css">
			*{
				margin:0;
				padding:0;
			}
			html,body{
				height:100%;
				width:100%;
			}
			#app{
				width:500px;
				height:200px;
				margin:50px auto;
				padding:20px;
				border:1px solid black;
				box-shadow:10px 20px 20px 10px gray;
			}
			hr{
				margin:20px 0;
			}
			h3{
				height:50px;
				line-height:50px;
				text-align:center;
				background-color:black;
				color:white;
				margin-bottom:20px;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<h3>父子之间通信(父传子)---props</h3>
			<menu-item title="来自父组件的值"></menu-item>
			<hr>
			<menu-item :title1="ptitle" content="我是内容"></menu-item>
		</div>
		<script>
			/* 
			【1】props属性名规则:
			 --->在props中使用驼峰形式，模板中需要使用短横线的形式
			 --->字符串形式的模板中没有这个限制
			 --->(html模板中短横线,props和模板字符串中用驼峰式)
			 
			【2】props属性值类型
			 --->字符串String=======(普通类型) :str="hello"
			 --->数值Number=========(普通类型) :num="12"
			 --->布尔值Boolean======(普通类型) :bol="true"
			 ===(前面加:,属性绑定，将内容做计算并且转换成对应的数据类型)
			 --->数组Array==========(引用类型)
			 --->对象Object=========(引用类型)
			 
			 */
			let vm = new Vue({
				el:"#app",
				data:{
					ptitle:"动态绑定属性"
				},
				components:{
					"menu-item":{
						template:`
						<div>
							<p>{{title}}</p>
							<p>{{title1 + "=======" + content}}</p>
						</div>`,
						data:function(){
							return {
								msg:"子组件本身的数据"
							}
						},
						props:["title","title1","content"]
					}
				}
			})
		</script>
	</body>
</html>
